<template>
  <aside class="sidebar-dark-primary elevation-4" style="background-color: darkslategrey; color: black">

    <c-context class="aside-contexts" @input="onContextSelected"/>

    <nuxt-link to="/" class="brand-link align-bottom">
      <img src="/favicon.png" class="brand-image">
      <!--			<span class="brand-text text-info font-weight-bold align-bottom"> K</span><span class="align-bottom">ore</span><sup><i class="fas fa-sm fa-cubes ml-1 text-warning"></i></sup><sub class="text-sm ml-1">dashboard</sub>-->
      <span class="brand-text text-info font-weight-bold align-bottom">418</span><sup><i class="fas fa-sm fa-cubes ml-1 text-warning"></i></sup><sub class="text-sm ml-1">  board</sub>
    </nuxt-link>

    <!-- Sidebar -->
    <div class="aside-menus">
      <!-- Sidebar Menu -->
      <nav class="mt-2">
        <ul class="nav nav-pills nav-sidebar flex-column nav-child-indent nav-compact" data-widget="treeview" role="menu" data-accordion="false">
          <!--集群-->
          <li class="nav-item has-treeview menu-open">
            <a href="#" class="nav-link" v-on:click="isVisible.cluster=!isVisible.cluster"><i class="nav-icon fas fa-cloud"></i><p>算力网集群<i v-bind:class="isVisible.cluster?'fa-angle-left':'fa-angle-up'" class="right fas"></i></p></a>
            <b-collapse v-model="isVisible.cluster">
              <ul class="nav d-block nav-treeview">
                <li class="nav-item small"><nuxt-link to="/cluster/topology"  class="nav-link"><p>拓扑结构</p></nuxt-link></li>
                <li class="nav-item small"><nuxt-link to="/workload/deployment.list"  class="nav-link"><p>应用部署</p></nuxt-link></li>
                <li class="nav-item small" v-on:click="isVisible.node=!isVisible.node"><nuxt-link to="" class="nav-link" ><p>节点信息<i v-bind:class="isVisible.node?'fa-angle-down':'fa-angle-left'" class="right fas"></i></p></nuxt-link></li>
<!--                <a href="#" class="nav-link" v-on:click="isVisible.node=!isVisible.node"><i class="nav-icon fas fa-cloud"></i><p>节点<i v-bind:class="isVisible.node?'fa-angle-left':'fa-angle-up'" class="right fas"></i></p></a>-->
                  <b-collapse v-model="isVisible.node">
                    <ul class="nav d-block nav-treeview">
                      <li class="nav-item small"><nuxt-link to="/cluster/node.list"  class="nav-link"><p>节点</p></nuxt-link></li>
                      <li class="nav-item small"><nuxt-link to="/workload/pod.list"  class="nav-link"><p>Pod</p></nuxt-link></li>
                    </ul>
                  </b-collapse>
<!--                <li class="nav-item small"><nuxt-link to="/cluster/namespace.list"  class="nav-link"><p>命名空间</p></nuxt-link></li>-->
                <li class="nav-item small"><nuxt-link to="/cluster/event.list"  class="nav-link"><p>事件</p></nuxt-link></li>
                <li class="nav-item small"><nuxt-link to="/cluster/mirror"  class="nav-link"><p>镜像</p></nuxt-link></li>
              </ul>
            </b-collapse>
          </li>

<!--          <li class="nav-item menu-open">-->
<!--            <a href="#" class="nav-link" v-on:click="isVisible.workload=!isVisible.workload"><i class="nav-icon fas fa-server"></i><p>工作负载<i v-bind:class="isVisible.workload?'fa-angle-left':'fa-angle-up'" class="right fas"></i></p></a>-->
<!--            <b-collapse v-model="isVisible.workload">-->
<!--              <ul class="nav d-block nav-treeview">-->

<!--                <li class="nav-item small"><nuxt-link to="/workload/pod.list"  class="nav-link"><p>Pod</p></nuxt-link></li>-->
<!--&lt;!&ndash;                <li class="nav-item small"><nuxt-link to="/workload/deployment.list"  class="nav-link"><p>Deployment</p></nuxt-link></li>&ndash;&gt;-->
<!--                <li class="nav-item small"><nuxt-link to="/workload/statefulset.list"  class="nav-link"><p>有状态集</p></nuxt-link></li>-->
<!--                <li class="nav-item small"><nuxt-link to="/workload/cornjob.list"  class="nav-link"><p>定时作业</p></nuxt-link></li>-->
<!--                <li class="nav-item small"><nuxt-link to="/workload/job.list"  class="nav-link"><p>作业</p></nuxt-link></li>-->
<!--                <li class="nav-item small"><nuxt-link to="/workload/daemonset.list"  class="nav-link"><p>守护进程</p></nuxt-link></li>-->
<!--                <li class="nav-item small"><nuxt-link to="/workload/replicaset.list"  class="nav-link"><p>副本集</p></nuxt-link></li>-->
<!--              </ul>-->
<!--            </b-collapse>-->
<!--          </li>-->
          <li class="nav-item menu-open">
<!--        网络-->
            <a href="#" class="nav-link" v-on:click="isVisible.networking=!isVisible.networking"><i class="nav-icon fas fa-network-wired"></i><p>网络<i v-bind:class="isVisible.networking?'fa-angle-left':'fa-angle-up'" class="right fas"></i></p></a>

            <b-collapse v-model="isVisible.networking">
              <li class="nav-item small"><nuxt-link to="/networking/network_topology"  class="nav-link"><p>网络拓扑图</p></nuxt-link></li>
                <li class="nav-item small" v-on:click="isVisible.netconfig=!isVisible.netconfig"><nuxt-link to="#" class="nav-link" ><p>基础配置<i v-bind:class="isVisible.netconfig?'fa-angle-down':'fa-angle-left'" class="right fas"></i></p></nuxt-link></li>
                  <b-collapse v-model="isVisible.netconfig">
                    <ul class="nav d-block nav-treeview">
                      <li class="nav-item small"><nuxt-link to="/networking/service.list"  class="nav-link"><p>Service</p></nuxt-link></li>
                      <li class="nav-item small"><nuxt-link to="/networking/ingress.list"  class="nav-link"><p>Ingress</p></nuxt-link></li>
                    </ul>
                  </b-collapse>
<!--                <li class="nav-item small"><nuxt-link to="/networking/service.list"  class="nav-link"><p>Service</p></nuxt-link></li>-->
<!--                <li class="nav-item small"><nuxt-link to="/networking/ingress.list"  class="nav-link"><p>Ingress</p></nuxt-link></li>-->
<!--                <li class="nav-item small"><nuxt-link to="/networking/endpoint.list"  class="nav-link"><p>端点</p></nuxt-link></li>-->
                <li class="nav-item small"><nuxt-link to="/networking/networkpolicy.list"  class="nav-link"><p>安全配置</p></nuxt-link></li>
            </b-collapse>
          </li>
<!--          <li class="nav-item menu-open">-->

<!--            <a href="#" class="nav-link" v-on:click="isVisible.storage=!isVisible.storage"><i class="nav-icon fas fa-hdd"></i><p>磁盘<i v-bind:class="isVisible.storage?'fa-angle-left':'fa-angle-up'" class="right fas"></i></p></a>-->
<!--            <b-collapse v-model="isVisible.storage">-->
<!--              <ul class="nav d-block nav-treeview">-->

<!--                <li class="nav-item small"><nuxt-link to="/storage/pvc.list"  class="nav-link"><p>持久卷声明</p></nuxt-link></li>-->
<!--                <li class="nav-item small"><nuxt-link to="/storage/pv.list"  class="nav-link"><p>持久卷</p></nuxt-link></li>-->
<!--                <li class="nav-item small"><nuxt-link to="/storage/storageclass.list"  class="nav-link"><p>存储类</p></nuxt-link></li>-->
<!--              </ul>-->
<!--            </b-collapse>-->
<!--          </li>-->
          <li class="nav-item menu-open">
<!--        配置-->
            <a href="#" class="nav-link" v-on:click="isVisible.configuration=!isVisible.configuration"><i class="nav-icon fas fa-cog"></i><p>配置<i v-bind:class="isVisible.configuration?'fa-angle-left':'fa-angle-up'" class="right fas"></i></p></a>
            <b-collapse v-model="isVisible.configuration">
              <ul class="nav d-block nav-treeview">

                <li class="nav-item small" v-on:click="isVisible.workload=!isVisible.workload"><nuxt-link to="#" class="nav-link" ><p>工作负载<i v-bind:class="isVisible.workload?'fa-angle-down':'fa-angle-left'" class="right fas"></i></p></nuxt-link></li>
                <b-collapse v-model="isVisible.workload">
                  <ul class="nav d-block nav-treeview">
                    <li class="nav-item small"><nuxt-link to="/workload/workload_topology"  class="nav-link"><p>负载情况</p></nuxt-link></li>
                    <li class="nav-item small"><nuxt-link to="/configuration/hpa.list"  class="nav-link"><p>算力调度</p></nuxt-link></li>
                    <li class="nav-item small"><nuxt-link to="/workload/data_dispatch.list"  class="nav-link"><p>数据调度</p></nuxt-link></li>
                  </ul>
                </b-collapse>

                <li class="nav-item small" v-on:click="isVisible.configfile=!isVisible.configfile"><nuxt-link to="#" class="nav-link" ><p>配置文件<i v-bind:class="isVisible.configfile?'fa-angle-down':'fa-angle-left'" class="right fas"></i></p></nuxt-link></li>
                <b-collapse v-model="isVisible.configfile">
                  <ul class="nav d-block nav-treeview">
                    <li class="nav-item small"><nuxt-link to="/configuration/configmap.list"  class="nav-link"><p>配置表</p></nuxt-link></li>
                    <li class="nav-item small"><nuxt-link to="/configuration/secret.list"  class="nav-link"><p>敏感数据</p></nuxt-link></li>
                  </ul>
                </b-collapse>

<!--                <li class="nav-item small"><nuxt-link to="/configuration/configmap.list"  class="nav-link"><p>配置表</p></nuxt-link></li>-->
<!--                <li class="nav-item small"><nuxt-link to="/configuration/secret.list"  class="nav-link"><p>敏感数据</p></nuxt-link></li>-->
<!--                <li class="nav-item small"><nuxt-link to="/configuration/resourcequota.list"  class="nav-link"><p>资源配额</p></nuxt-link></li>-->
<!--                <li class="nav-item small"><nuxt-link to="/configuration/limitrange.list"  class="nav-link"><p>资源限制</p></nuxt-link></li>-->
<!--                <li class="nav-item small"><nuxt-link to="/configuration/hpa.list"  class="nav-link"><p>弹性伸缩</p></nuxt-link></li>-->
<!--                <li class="nav-item small"><nuxt-link to="/configuration/poddisruptionbudget.list"  class="nav-link"><p>Pod中断预算</p></nuxt-link></li>-->
              </ul>
            </b-collapse>
          </li>
          <!--					<li class="nav-item menu-open">-->
          <!--            <a href="#" class="nav-link" v-on:click="isVisible.administrator=!isVisible.administrator"><i class="nav-icon fas fa-users-cog"></i><p>管理员<i v-bind:class="isVisible.administrator?'fa-angle-left':'fa-angle-up'" class="right fas"></i></p></a>-->
          <!--						<b-collapse v-model="isVisible.administrator">-->
          <!--							<ul class="nav d-block nav-treeview">-->
          <!--								<li class="nav-item small"><nuxt-link to="/administrator/serviceaccount.list"  class="nav-link"><p>服务账户</p></nuxt-link></li>-->
          <!--								<li class="nav-item small"><nuxt-link to="/administrator/clusterrole.list"  class="nav-link"><p>集群角色</p></nuxt-link></li>-->
          <!--								<li class="nav-item small"><nuxt-link to="/administrator/clusterrolebinding.list"  class="nav-link"><p>集群角色绑定</p></nuxt-link></li>-->
          <!--								<li class="nav-item small"><nuxt-link to="/administrator/role.list"  class="nav-link"><p>角色</p></nuxt-link></li>-->
          <!--								<li class="nav-item small"><nuxt-link to="/administrator/rolebinding.list"  class="nav-link"><p>角色绑定</p></nuxt-link></li>-->
          <!--							</ul>-->
          <!--						</b-collapse>-->
          <!--					</li>-->
          <!--custom resource -->
          <!--					<li class="nav-item menu-open mw-100">-->
          <!--            <a href="#" class="nav-link" v-on:click="isVisible.crd=!isVisible.crd"><i class="nav-icon fas fa-puzzle-piece"></i><p>自定义资源<i v-bind:class="isVisible.crd?'fa-angle-left':'fa-angle-up'" class="right fas"></i></p></a>-->
          <!--						<b-collapse v-model="isVisible.crd">-->
          <!--							&lt;!&ndash;custom resource : group &ndash;&gt;-->
          <!--							<ul class="nav d-block nav-treeview">-->
          <!--								<li class="nav-item small"><nuxt-link to="/customresource/customresourcedefinitions.list"  class="nav-link"><p>定义</p></nuxt-link></li>-->
          <!--								<ul class="nav nav-pills nav-sidebar flex-column nav-child-indent nav-compact" data-widget="treeview" role="menu" data-accordion="false">-->
          <!--									<li v-for="(group, nm) in crdList" :key="nm" class="nav-item small mw-100">-->
          <!--										<a href="#" class="nav-link" v-on:click="isVisible.crdGroup[nm] = !isVisible.crdGroup[nm]"><p class="text-truncate mw-100 pr-2">{{ nm }}<i v-bind:class="1==1 ? 'fa-angle-down':'fa-angle-left'" class="right fas"></i></p></a>-->
          <!--										&lt;!&ndash;custom resource : group > crd &ndash;&gt;-->
          <!--										<b-collapse v-model="isVisible.crdGroup[nm]">-->
          <!--											<ul class="nav d-block nav-treeview">-->
          <!--												<li v-for="(crd, crdnm) in group"  :key="crdnm" class="nav-item" >-->
          <!--													<nuxt-link :to="toCRDLink(crd)"  class="nav-link pl-2 pt-0 pb-0" replace>-->
          <!--														<p class="text-truncate mw-100"><b-icon icon="dot"></b-icon>{{ crd.kind }}</p>-->
          <!--													</nuxt-link>-->
          <!--												</li>-->
          <!--											</ul>-->
          <!--										</b-collapse>-->
          <!--									</li>-->
          <!--								</ul>-->
          <!--							</ul>-->
          <!--						</b-collapse>-->
          <!--					</li>&lt;!&ndash;// custom resource &ndash;&gt;-->

        </ul>
      </nav><!-- /.sidebar-menu -->
    </div>
  </aside>
</template>
<style scoped>
.aside-menus .nav-link {color:#c2c7d0; }
.aside-menus .nuxt-link-active:focus {background-color : rgba(255,255,255,.2)!important; }
.aside-menus .nuxt-link-exact-active {background-color : rgba(255,255,255,.2); }
</style>

<script>
import VueContext	from "@/layouts/components/context.vue";
export default {
  components: {
    "c-context": VueContext,
  },
  data() {
    return {
      isVisible: {
        cluster: true,
        workload: true,
        networking: true,
        storage: true,
        configuration: true,
        administrator: true,
        node:true,
        netconfig:true,
        configfile:true,
        crd : true,
        crdGroup: {}
      },
      crdList: {}
    }
  },
  methods: {
    onContextSelected(data) {
      this.namespaces(data.currentContext.namespaces);
      this.resources(data.currentContext.resources);
      this.statusbar({message: "", kubernetesVersion: data.currentContext.kubernetesVersion, platform: data.currentContext.platform})
      this.crdList = {}
      for(let r in this.resources()) {
        if( !r.endsWith("k8s.io") && r.indexOf(".") > 0 ) {
          this.crdList[r] = this.resources()[r];
        }
      };
      this.isVisible.crdGroup = {};
      this.$nuxt.$emit("context-selected");
    },
    toCRDLink(crd) {
      let a = crd.groupVersion.split("/");
      let query = {group: a[0], crd: crd.name,  name:crd.kind, version: ""};
      if (a.length > 1) query.version = a[1];
      return {path: '/customresource/customresource.list', query: query}
    }
  }
}
</script>